import React, { Component, PropTypes } from 'react';
import axios from 'axios';

import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux';
import store from '../../store';

class NewFolder extends Component{

    closeFrame(e){
        e.stopPropagation();
        store.dispatch({
            type: 'NEW_FOLDER',
            newFolder: false
        });
        $('.backcover').hide();
    }

    addMenu(name){
        var _state = {
            name: name,
            active: '',
            rename: true
        } ;
        store.dispatch({
            type: 'GET_FOLDER',
            folderList: [...store.getState().folderReducer.folderList, _state]
        });
    }

    saveFolder(folderName){
        var _that = this;
        axios.get('/saveFolder',{
            params: {
                name: folderName
            }
        })
        .then(function(response){
            _that.addMenu(folderName)
        })
        .catch(function(error){
            alert('系统出错！')
        })
    }

    newFolder(e){
        var { folderList, errorTip } = this.props;
        var folderName = $('#new-folder-input').val().replace(/\s/g, "");
        var hasFolder = folderList.find((value, index, arr) => {
            return (folderName === value.name) ? true : false ; 
        })
        if (!folderName || folderName ===''){
            store.dispatch({
                type: 'ERROR_TIP',
                errorTip: '文件夹不能为空！'
            });
            $('#new-folder-error').show();
            return false;
        }

        if (folderName === '上传文件') {
            store.dispatch({
                type: 'ERROR_TIP',
                errorTip: '文件夹名字不能为特殊名字！'
            });
            $('#new-folder-error').show();
            return false;
        }

        if (hasFolder) {
            store.dispatch({
                type: 'ERROR_TIP',
                errorTip: '文件夹不能重名！'
            });
            $('#new-folder-error').show();
            return false;
        } 

        

        store.dispatch({
            type: 'NEW_FOLDER',
            newFolder: false
        });

        this.saveFolder(folderName)

        $('.backcover').hide();
    }

    clearnError(){
        $('#new-folder-error').hide();
    }

    render(){
        var { isNew, errorTip } = this.props;
        var classs = 'new-container hide';
        if ( isNew) classs = 'new-container'

        return (
            <section id="new-folder" className={ classs }>
                <div className="new-title">
                    新建文件夹
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div><input id="new-folder-input" type="text" placeholder="请输入文件夹名字" onFocus={this.clearnError.bind(this)}/></div>
                <div id="new-folder-error" className="error">{ errorTip }</div>
                <div>
                    <button id="new-folder-btn" className="new-btn" onClick={this.newFolder.bind(this)}>新建</button>
                </div>
            </section>
        )
    }

}

const mapStateToProps  = (state) => {
    return {
        folderList: state.folderReducer.folderList,
        isNew: state.folderReducer.newFolder,
        errorTip: state.folderReducer.errorTip
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NewFolder);